import React, { useState, useEffect, createRef } from 'react'
import HeaderTop from "../../components/HeaderTop/HeaderTop";
import styles from '../../style/childPublic/childPublic.module.less'
import conBack from '../../style/contentBack/contentBack.module.less'

import { Button, Input, message, Pagination, Empty } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { byUserOutKuWeightData } from '../../apis/bigDate'

export default function CountyBusiness() {
  const [messageApi, contextHolder] = message.useMessage();
  const key = 'updatable';
  const [title] = useState('经营主体信息监管平台')
  const [contentListTitle] = useState([
    { id: 1, title: '序号' },
    { id: 2, title: '区域' },
    { id: 3, title: '销量' },
    { id: 4, title: '联系人' },
    { id: 5, title: '联系电话' },
    { id: 6, title: '地址' },
  ])
  const [contentList, setContentList] = useState([])
  const keyWordsRef = createRef();
  const [keyWords, setKeyWords] = useState('')
  const [dataList, setDataList] = useState({ area_id: localStorage.getItem('areaId'), area_level: localStorage.getItem('areaLevel'), out_type: 0, start_time: JSON.parse(localStorage.getItem('saleTime')).start_time, end_time: JSON.parse(localStorage.getItem('saleTime')).end_time, keywords: '', type_id: '', pageNum: 1, pageSize: '10', })
  const [total, setTotal] = useState(0)
  useEffect(() => {
    getList()
  }, [dataList])
  const getList = async () => {
    messageApi.open({
      key,
      type: 'loading',
      content: '数据加载中...',
    });
    const { data } = await byUserOutKuWeightData(dataList)
    if (data.state === 1) {
      setContentList(data.list)

      setTotal(data.count)
      messageApi.open({
        key,
        type: 'success',
        content: '数据加载完成!',
        duration: 2,
      });
    } else {
      messageApi.open({
        key,
        type: 'error',
        content: data.msg,
        duration: 2,
      });
    }
  };
  // 分页
  const itemRender = (_, type, originalElement) => {
    if (type === 'prev') {
      return <a>上一页</a>;
    }
    if (type === 'next') {
      return <a>下一页</a>;
    }
    return originalElement;
  };
  // 搜索
  const search = () => {
    setDataList({ ...dataList, pageNum: 1, keywords: keyWords })
  };
  // 切换页码
  const onChangePage = (page, pageSize) => {
    setDataList({
      ...dataList,
      pageNum: page
    })
  };
  // 导出
  const getData = () => {
    messageApi.open({
      key,
      type: 'loading',
      content: '导出中...',
    });
    window.location.href = `https://iotcloud.sc-iot.cn:22002/areaExport/govUser?access_token=${localStorage.getItem('token')}&keywords=${dataList.keywords}&xian=${localStorage.getItem('areaId')}&role_id=5`
    messageApi.open({
      key,
      type: 'success',
      content: '导出完成!',
      duration: 2,
    });
  };
  return (
    <div div className={styles.pubBack}>
      {contextHolder}
      <HeaderTop title={title}></HeaderTop>
      <div className={conBack.contentBack}>
        <span className={conBack.top}>全县上季度销售信息列表</span>
        <div className={conBack.contentList}>
          <div className={conBack.topStatus}>
            <Button type="primary">导出信息</Button>
            {/* 搜索框 */}

            <div className={conBack.rightList}>
              <div className={conBack.searchBtn}>
                <Input ref={keyWordsRef} value={keyWords} onChange={() => {
                  setKeyWords(keyWordsRef.current.input.value)
                }} placeholder="请输入联系人名称/电话查询" />
                <Button type="primary" onClick={() => search()} icon={<SearchOutlined />}>
                  查询
                </Button>
              </div>
            </div>
          </div>
          {/* 列表数据 */}
          {/* 列表 */}
          <div className={conBack.listBox}>
            <table>
              <thead>
                {
                  contentListTitle.map(item => {
                    return (
                      <th key={item.id}>{item.title}  </th>
                    )
                  })
                }
              </thead>
              <tbody className={contentList.length !== 0 ? "" : `${conBack.noShowData}`}>
                {
                  contentList.map((item, index) => {
                    return (
                      <tr key={item.id}>
                        <td>{index + 1}</td>
                        <td>{item.zhen_name}</td>
                        <td>{item.out_weight}kg</td>
                        <td>{item.user_name}</td>
                        <td>{item.mobile}</td>
                        <td>{item.address === undefined ? '未填写' : item.address}</td>

                      </tr>
                    )
                  })
                }
              </tbody>
              <tr className={contentList.length === 0 ? `${conBack.emptyData}` : `${conBack.noShowData}`}>
                <td colSpan={7} style={{ textAlign: 'center' }}>
                  <Empty
                    image="http://120.79.70.96:10301/mapimg/kong_he.png"
                    imageStyle={{
                      height: 150,
                    }} />
                </td>
              </tr>
            </table>
          </div>
          {/* 页尾 */}
          <div className={conBack.pagActive}>
            <Pagination total={total} current={dataList.pageNum} defaultCurrent={1} showTotal={(total) => `共 ${total} 条记录`} itemRender={itemRender} pageSize={10} onChange={onChangePage} showSizeChanger={false} />
          </div>
        </div>
      </div>
    </div>
  )
}
